<%= if @show_modal do %>
  {live_modal(@modal.body.module_or_template,
    id: @modal.body.id,
    title: @modal.body.title,
    user: @user,
    params: @modal.params,
    view: @modal.body[:view],
    source: @source,
    search_op_log_events: @search_op_log_events,
    search_op_log_aggregates: @search_op_log_aggregates,
    search_op_error: @search_op_error,
    team_user: @team_user,
    close: @modal.body[:close],
    return_to: @modal.body.return_to
  )}
<% end %>

<div id="source-logs-search-control" class="subhead " phx-hook="SourceLogsSearch">
  <div class="container mx-auto">
    <h5>
      ~/logs/<.team_link team={@team} href={~p"/sources/#{@source}"} class="text-primary">{@source.name}</.team_link>/search
    </h5>
    <div class="log-settings tw-justify-between tw-mt-2">
      <.timezone user_preferences={@user.preferences} search_timezone={@search_timezone} />
      <ul>
        <li>
          <a href="javascript:Source.scrollOverflowBottom();">
            <span id="scroll-down"><i class="fas fa-chevron-circle-down"></i></span>
            <span class="hide-on-mobile">scroll
              down</span>
          </a>
        </li>
        <li>
          {LqlHelpers.lql_help_modal_link()}
        </li>
        <li>
          {LqlHelpers.bq_source_schema_modal_link()}
        </li>
        <li>
          <span id="search-uri-query" class="pointer-cursor" data-trigger="hover focus" data-delay="0" data-toggle="tooltip" data-placement="top" data-title="<span id=&quot;copy-tooltip&quot;>Copy uri</span>">
            <span>
              <i class="fas fa-copy"></i>
            </span>
            <span class="hide-on-mobile">
              share
            </span>
          </span>
        </li>
        <%= if @search_op_error && is_nil(@search_op_log_events) && is_nil(@search_op_log_aggregates) do %>
          <li>
            <%= live_modal_show_link(component: LogflareWeb.Search.QueryDebugComponent, modal_id: :modal_debug_error_link, title: "Query Debugging") do %>
              <i class="fas fa-bug"></i><span class="hide-on-mobile"> debug error </span>
            <% end %>
          </li>
        <% else %>
          <li>
            <%= live_modal_show_link(component: LogflareWeb.Search.QueryDebugComponent, modal_id: :modal_debug_log_events_link, title: "Query Debugging") do %>
              <i class="fas fa-bug"></i><span class="hide-on-mobile"> events </span>
            <% end %>
          </li>
          <li>
            <%= live_modal_show_link(component: LogflareWeb.Search.QueryDebugComponent, modal_id: :modal_debug_log_aggregates_link, title: "Query Debugging") do %>
              <i class="fas fa-bug"></i><span class="hide-on-mobile"> aggregate </span>
            <% end %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</div>
<div class="container source-logs-search-container console-text">
  <div id="logs-list-container">
    {Phoenix.View.render(SearchView, "logs_list.html",
      search_op_log_events: @search_op_log_events,
      last_query_completed_at: @last_query_completed_at,
      search_timezone: @search_timezone,
      loading: @loading,
      source: @source,
      tailing?: @tailing?,
      querystring: @querystring,
      user: @user
    )}
  </div>
  <div>
    {live_react_component(
      "Components.LogEventsChart",
      %{
        data: if(@search_op_log_aggregates, do: @search_op_log_aggregates.rows, else: []),
        loading: @chart_loading,
        display_timezone: @search_timezone || "Etc/UTC",
        chart_period: get_chart_period(@lql_rules, "minute"),
        chart_data_shape_id:
          if(@search_op_log_aggregates,
            do: @search_op_log_aggregates.chart_data_shape_id,
            else: nil
          )
      },
      id: "log-events-chart"
    )}
  </div>
  <div class="search-control">
    <.form :let={f} for={@search_form} action="#" phx-submit="start_search" phx-change="form_update" class="form-group">
      <div class="form-group form-text">
        {text_input(f, :querystring,
          phx_focus: :form_focus,
          phx_blur: :form_blur,
          value: @querystring,
          class: "form-control form-control-margin",
          list: "matches"
        )}
        {text_input(f, :search_timezone,
          class: "d-none",
          value: @search_timezone,
          id: "search-timezone"
        )}
        <datalist id="matches">
          <%= for s <- @search_history do %>
            <option value={s.querystring}>{s.querystring}</option>
          <% end %>
        </datalist>
      </div>
      <div class="d-flex flex-wrap align-items-center form-text">
        <div class="pr-2 pt-1 pb-1">
          <%= submit disabled: @loading, id: "search", class: "btn btn-primary" do %>
            <i class="fas fa-search"></i><span class="fas-in-button hide-on-mobile">Search</span>
          <% end %>
        </div>

        <div class="btn-group pr-2">
          <a href="#" phx-click="backwards" class="btn btn-primary mr-0">
            <span class="fas fa-step-backward"></span>
          </a>
          <%= if @tailing? do %>
            <span class="btn btn-primary live-pause mr-0 text-nowrap" phx-click="soft_pause">
              <i class="spinner-border spinner-border-sm text-info" role="status"></i>
              <span class="fas-in-button hide-on-mobile" id="search-tailing-button">Pause</span>
            </span>
          <% else %>
            <%= if @uri_params["tailing?"] == "true" do %>
              <span class="btn btn-primary live-pause mr-0" phx-click="soft_play">
                <i class="fas fa-play"></i><span class="fas-in-button hide-on-mobile">Live</span>
              </span>
            <% else %>
              <span class="btn btn-primary live-pause mr-0" phx-click="hard_play">
                <i class="fas fa-play"></i><span class="fas-in-button hide-on-mobile">Live</span>
              </span>
            <% end %>
          <% end %>
          <a href="#" phx-click="forwards" class="btn btn-primary">
            <span class="fas fa-step-forward"></span>
          </a>
        </div>

        <div class="pr-2 pt-1 pb-1">
          <a href="#" phx-click="save_search" class="btn btn-primary">
            <i class="fas fa-save"></i>
            <span class="fas-in-button hide-on-mobile">Save</span>
          </a>
        </div>

        <div class="pr-2 pt-1 pb-1">
          <span class="btn btn-primary" id="daterangepicker">
            <i class="fas fa-clock"></i>
            <span class="hide-on-mobile fas-in-button">DateTime</span>
          </span>
        </div>

        <div class="pr-2 pt-1 pb-1">
          <%= link to: Routes.live_path(@socket, LogflareWeb.Source.SearchLV, @source, querystring: "c:count(*) c:group_by(t::minute)", tailing?: true), class: "btn btn-primary" do %>
            <i class="fas fa-redo"></i>
            <span class="hide-on-mobile fas-in-button">Reset</span>
          <% end %>
        </div>
        <div class="pr-2 pt-1 pb-1">
          <LogflareWeb.SearchLive.SearchComponents.create_menu user={@user} disabled={is_nil(@search_op_log_events) || is_nil(@search_op_log_aggregates)} />
        </div>
      </div>

      <div class="d-flex flex-wrap align-items-center form-text pt-2">
        <div class="pr-3 pt-1 pb-1  hide-on-mobile">
          Chart period:
        </div>
        <div class="pr-3 pt-1 pb-1">
          {select(f, :chart_period, ["day", "hour", "minute", "second"],
            selected: get_chart_period(@lql_rules, "minute"),
            class: "form-control form-control-sm"
          )}
        </div>
        <div class="pr-3 pt-1 pb-1 hide-on-mobile">
          Aggregate:
        </div>
        <div class="pr-3 pt-1 pb-1">
          <%= if @chart_aggregate_enabled? do %>
            {select(
              f,
              :chart_aggregate,
              ["sum", "avg", "max", "p50", "p95", "p99", "count"],
              selected: get_chart_aggregate(@lql_rules, "count"),
              class: "form-control form-control-sm"
            )}
          <% else %>
            <span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Chart aggregate setting requires usage of chart: operator" trigger="hover click" delay="0">
              {select(
                f,
                :chart_aggregate,
                ["count"],
                selected: "count",
                class: "form-control form-control-sm",
                style: "pointer-events: none;"
              )}
            </span>
          <% end %>
        </div>
      </div>
      <div id="observer-target"></div>
    </.form>
    <%= if @last_query_completed_at do %>
      <small class="form-text text-muted" id="last-query-completed-at" data-timestamp={Timex.to_unix(@last_query_completed_at)}>
        Elapsed since last query: <span id="elapsed" phx-update="ignore"> 0.0 </span> seconds
      </small>
    <% else %>
      <small class="form-text text-muted">
        Elapsed since last query: 0.0 seconds
      </small>
    <% end %>
  </div>
  <div id="user-idle" phx-click="user_idle" class="d-none" data-user-idle-interval={@user_idle_interval}></div>
</div>
